import { cn } from '@/lib/utils'

interface BookCardProps {
  title: string
  author: string
  coverUrl: string
  price: number
  ageRange: string
  rating?: number
  onClick?: () => void
}

export function BookCard({ 
  title, 
  author, 
  coverUrl, 
  price, 
  ageRange, 
  rating = 0,
  onClick 
}: BookCardProps) {
  return (
    <div 
      className={cn(
        "bg-white rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer overflow-hidden",
        "border border-gray-100"
      )}
      onClick={onClick}
    >
      <div className="aspect-[3/4] relative overflow-hidden">
        <img 
          src={coverUrl} 
          alt={title}
          className="w-full h-full object-cover"
        />
        {rating > 0 && (
          <div className="absolute top-2 right-2 bg-yellow-400 text-white px-2 py-1 rounded-full text-xs font-semibold">
            ⭐ {rating.toFixed(1)}
          </div>
        )}
      </div>
      
      <div className="p-4">
        <h3 className="font-semibold text-gray-800 text-sm mb-1 line-clamp-2">
          {title}
        </h3>
        <p className="text-gray-600 text-xs mb-2">
          {author}
        </p>
        <div className="flex items-center justify-between">
          <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
            {ageRange}
          </span>
          <span className="text-lg font-bold text-[#2C5282]">
            ¥{price}
          </span>
        </div>
      </div>
    </div>
  )
}